<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 百度贴吧</title>
    <link rel="stylesheet" href="common.css">
    <style>
        .profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 3rem 0;
        }

        .profile-info {
            display: flex;
            align-items: center;
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }

        .profile-avatar {
            width: 120px;
            height: 120px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            font-weight: bold;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform var(--transition-fast);
        }

        .profile-avatar:hover {
            transform: scale(1.05);
        }

        .profile-details {
            flex: 1;
        }

        .profile-details h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .profile-bio {
            opacity: 0.9;
            margin-bottom: 1rem;
        }

        .profile-stats {
            display: flex;
            gap: 2rem;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: bold;
        }

        .profile-tabs {
            background-color: var(--background-primary);
            border-bottom: 2px solid var(--border-color);
            position: sticky;
            top: 60px;
            z-index: 100;
        }

        .tabs-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
            list-style: none;
            overflow-x: auto;
        }

        .tab-item {
            flex-shrink: 0;
        }

        .tab-link {
            display: block;
            padding: 1rem 1.5rem;
            color: var(--text-secondary);
            text-decoration: none;
            border-bottom: 3px solid transparent;
            transition: all var(--transition-fast);
            font-weight: 500;
        }

        .tab-link:hover {
            color: var(--primary-color);
        }

        .tab-link.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        .profile-content {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 var(--spacing-lg);
        }

        .content-section {
            background-color: var(--background-primary);
            border-radius: var(--border-radius-medium);
            padding: 2rem;
            box-shadow: 0 2px 8px var(--shadow-light);
            display: none;
        }

        .content-section.active {
            display: block;
        }

        .section-title {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--border-color);
        }

        .info-form {
            max-width: 600px;
        }

        .posts-grid {
            display: grid;
            gap: 1rem;
        }

        .user-post-item {
            padding: 1.5rem;
            background-color: var(--background-secondary);
            border-radius: var(--border-radius-medium);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .user-post-item:hover {
            background-color: var(--border-color);
            transform: translateX(4px);
        }

        .user-post-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .user-post-meta {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .notification-item {
            display: flex;
            gap: 1rem;
            padding: 1.5rem;
            background-color: var(--background-secondary);
            border-radius: var(--border-radius-medium);
            margin-bottom: 1rem;
            transition: all var(--transition-fast);
        }

        .notification-item:hover {
            background-color: var(--border-color);
        }

        .notification-item.unread {
            background-color: rgba(0, 122, 255, 0.1);
            border-left: 4px solid var(--primary-color);
        }

        .notification-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .notification-content {
            flex: 1;
        }

        .notification-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .notification-text {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
        }

        .notification-time {
            color: var(--text-secondary);
            font-size: 0.85rem;
        }

        .settings-group {
            margin-bottom: 2rem;
        }

        .settings-group h3 {
            margin-bottom: 1rem;
        }

        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: var(--background-secondary);
            border-radius: var(--border-radius-small);
            margin-bottom: 0.5rem;
        }

        .setting-label {
            font-weight: 500;
        }

        .setting-description {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 0.25rem;
        }

        .toggle-switch {
            position: relative;
            width: 50px;
            height: 26px;
            background-color: var(--border-color);
            border-radius: 13px;
            cursor: pointer;
            transition: background-color var(--transition-fast);
        }

        .toggle-switch.active {
            background-color: var(--primary-color);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: white;
            top: 2px;
            left: 2px;
            transition: left var(--transition-fast);
        }

        .toggle-switch.active::after {
            left: 26px;
        }

        @media (max-width: 768px) {
            .profile-info {
                flex-direction: column;
                text-align: center;
            }

            .profile-avatar {
                width: 100px;
                height: 100px;
                font-size: 2.5rem;
            }

            .profile-stats {
                justify-content: center;
            }

            .tabs-container {
                justify-content: flex-start;
            }

            .setting-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="index.html" class="logo">百度贴吧</a>
            <button class="nav-toggle" id="navToggle">
                <span>☰</span>
            </button>
            <ul class="nav-links" id="navLinks">
                <li><a href="index.html">首页</a></li>
                <li><a href="tieba-list.html">贴吧</a></li>
                <li><a href="create-post.html">发帖</a></li>
                <li><a href="user-profile.html">个人中心</a></li>
            </ul>
            <div class="nav-user">
                <button class="btn btn-secondary">登录</button>
                <button class="btn btn-primary">注册</button>
            </div>
        </div>
    </nav>

    <!-- 个人资料头部 -->
    <div class="profile-header">
        <div class="profile-info">
            <div class="profile-avatar" title="点击更换头像">张</div>
            <div class="profile-details">
                <h1>张三</h1>
                <div class="profile-bio">热爱游戏、电影、美食的普通用户 | Lv.15 | 游戏达人</div>
                <div class="profile-stats">
                    <div class="stat-item">
                        <span class="stat-number">156</span>
                        <span>帖子</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">1.2万</span>
                        <span>获赞</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">3456</span>
                        <span>粉丝</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">234</span>
                        <span>关注</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 标签页导航 -->
    <div class="profile-tabs">
        <ul class="tabs-container">
            <li class="tab-item">
                <a href="#" class="tab-link active" onclick="switchTab(event, 'info')">个人信息</a>
            </li>
            <li class="tab-item">
                <a href="#" class="tab-link" onclick="switchTab(event, 'posts')">我的帖子</a>
            </li>
            <li class="tab-item">
                <a href="#" class="tab-link" onclick="switchTab(event, 'favorites')">我的收藏</a>
            </li>
            <li class="tab-item">
                <a href="#" class="tab-link" onclick="switchTab(event, 'notifications')">消息通知</a>
            </li>
            <li class="tab-item">
                <a href="#" class="tab-link" onclick="switchTab(event, 'settings')">设置</a>
            </li>
        </ul>
    </div>

    <!-- 内容区域 -->
    <div class="profile-content">
        <!-- 个人信息 -->
        <div class="content-section active" id="info">
            <h2 class="section-title">个人信息</h2>
            <form class="info-form">
                <div class="form-group">
                    <label class="form-label">用户名</label>
                    <input type="text" class="form-input" value="张三" readonly>
                </div>
                <div class="form-group">
                    <label class="form-label">昵称</label>
                    <input type="text" class="form-input" value="张三">
                </div>
                <div class="form-group">
                    <label class="form-label">邮箱</label>
                    <input type="email" class="form-input" value="zhangsan@example.com">
                </div>
                <div class="form-group">
                    <label class="form-label">手机号</label>
                    <input type="tel" class="form-input" value="138****5678">
                </div>
                <div class="form-group">
                    <label class="form-label">个人简介</label>
                    <textarea class="form-textarea" placeholder="介绍一下自己吧...">热爱游戏、电影、美食的普通用户</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">生日</label>
                    <input type="date" class="form-input" value="1990-01-01">
                </div>
                <div class="form-group">
                    <label class="form-label">性别</label>
                    <select class="form-select">
                        <option>男</option>
                        <option>女</option>
                        <option>保密</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">保存修改</button>
            </form>
        </div>

        <!-- 我的帖子 -->
        <div class="content-section" id="posts">
            <h2 class="section-title">我的帖子 (156)</h2>
            <div class="posts-grid">
                <div class="user-post-item" onclick="window.location.href='post-detail.html'">
                    <div class="user-post-title">【攻略】新手上路必看的游戏技巧</div>
                    <div class="user-post-meta">游戏吧 · 👁 1.2万 · 💬 234 · 👍 567 · 2小时前</div>
                </div>
                <div class="user-post-item" onclick="window.location.href='post-detail.html'">
                    <div class="user-post-title">【分享】今天通关的心得体会</div>
                    <div class="user-post-meta">游戏吧 · 👁 8.5万 · 💬 189 · 👍 432 · 1天前</div>
                </div>
                <div class="user-post-item" onclick="window.location.href='post-detail.html'">
                    <div class="user-post-title">【讨论】关于游戏平衡性的一些看法</div>
                    <div class="user-post-meta">游戏吧 · 👁 5.6万 · 💬 156 · 👍 389 · 2天前</div>
                </div>
                <div class="user-post-item" onclick="window.location.href='post-detail.html'">
                    <div class="user-post-title">【评测】最新DLC深度体验报告</div>
                    <div class="user-post-meta">游戏吧 · 👁 9.7万 · 💬 298 · 👍 612 · 3天前</div>
                </div>
                <div class="user-post-item" onclick="window.location.href='post-detail.html'">
                    <div class="user-post-title">【视频】精彩操作集锦第三期</div>
                    <div class="user-post-meta">游戏吧 · 👁 4.3万 · 💬 89 · 👍 234 · 5天前</div>
                </div>
            </div>
            <div class="text-center mt-3">
                <button class="btn btn-secondary">加载更多</button>
            </div>
        </div>

        <!-- 我的收藏 -->
        <div class="content-section" id="favorites">
            <h2 class="section-title">我的收藏 (45)</h2>
            <div class="posts-grid">
                <div class="user-post-item" onclick="window.location.href='post-detail.html'">
                    <div class="user-post-title">【攻略】高级玩家必备技巧汇总</div>
                    <div class="user-post-meta">游戏吧 · 李四 · 收藏于2天前</div>
                </div>
                <div class="user-post-item" onclick="window.location.href='post-detail.html'">
                    <div class="user-post-title">【教程】从零开始的游戏之旅</div>
                    <div class="user-post-meta">游戏吧 · 王五 · 收藏于3天前</div>
                </div>
                <div class="user-post-item" onclick="window.location.href='post-detail.html'">
                    <div class="user-post-title">【资源】实用工具合集推荐</div>
                    <div class="user-post-meta">游戏吧 · 赵六 · 收藏于5天前</div>
                </div>
            </div>
            <div class="text-center mt-3">
                <button class="btn btn-secondary">加载更多</button>
            </div>
        </div>

        <!-- 消息通知 -->
        <div class="content-section" id="notifications">
            <h2 class="section-title">消息通知</h2>

            <div class="notification-item unread">
                <div class="notification-icon">👍</div>
                <div class="notification-content">
                    <div class="notification-title">李四 赞了你的帖子</div>
                    <div class="notification-text">【攻略】新手上路必看的游戏技巧</div>
                    <div class="notification-time">2小时前</div>
                </div>
            </div>

            <div class="notification-item unread">
                <div class="notification-icon">💬</div>
                <div class="notification-content">
                    <div class="notification-title">王五 评论了你的帖子</div>
                    <div class="notification-text">非常实用的攻略,学到了很多!</div>
                    <div class="notification-time">5小时前</div>
                </div>
            </div>

            <div class="notification-item">
                <div class="notification-icon">⭐</div>
                <div class="notification-content">
                    <div class="notification-title">赵六 收藏了你的帖子</div>
                    <div class="notification-text">【攻略】新手上路必看的游戏技巧</div>
                    <div class="notification-time">1天前</div>
                </div>
            </div>

            <div class="notification-item">
                <div class="notification-icon">👤</div>
                <div class="notification-content">
                    <div class="notification-title">孙七 关注了你</div>
                    <div class="notification-text">你有了一个新粉丝</div>
                    <div class="notification-time">2天前</div>
                </div>
            </div>

            <div class="notification-item">
                <div class="notification-icon">🔔</div>
                <div class="notification-content">
                    <div class="notification-title">系统通知</div>
                    <div class="notification-text">你的帖子【攻略】新手上路必看的游戏技巧被设为精华帖</div>
                    <div class="notification-time">3天前</div>
                </div>
            </div>

            <div class="text-center mt-3">
                <button class="btn btn-secondary">标记全部已读</button>
                <button class="btn btn-secondary">加载更多</button>
            </div>
        </div>

        <!-- 设置 -->
        <div class="content-section" id="settings">
            <h2 class="section-title">设置</h2>

            <div class="settings-group">
                <h3>隐私设置</h3>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">公开个人资料</div>
                        <div class="setting-description">允许其他用户查看你的个人资料</div>
                    </div>
                    <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
                </div>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">显示在线状态</div>
                        <div class="setting-description">让其他用户知道你是否在线</div>
                    </div>
                    <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
                </div>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">允许陌生人私信</div>
                        <div class="setting-description">非关注用户也可以给你发私信</div>
                    </div>
                    <div class="toggle-switch" onclick="this.classList.toggle('active')"></div>
                </div>
            </div>

            <div class="settings-group">
                <h3>通知设置</h3>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">评论通知</div>
                        <div class="setting-description">有人评论你的帖子时接收通知</div>
                    </div>
                    <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
                </div>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">点赞通知</div>
                        <div class="setting-description">有人点赞你的帖子时接收通知</div>
                    </div>
                    <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
                </div>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">关注通知</div>
                        <div class="setting-description">有新粉丝关注你时接收通知</div>
                    </div>
                    <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
                </div>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">系统通知</div>
                        <div class="setting-description">接收系统重要通知和公告</div>
                    </div>
                    <div class="toggle-switch active" onclick="this.classList.toggle('active')"></div>
                </div>
            </div>

            <div class="settings-group">
                <h3>账号安全</h3>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">修改密码</div>
                        <div class="setting-description">定期更换密码保护账号安全</div>
                    </div>
                    <button class="btn btn-secondary">修改</button>
                </div>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">双重认证</div>
                        <div class="setting-description">启用双重认证提高账号安全性</div>
                    </div>
                    <button class="btn btn-secondary">启用</button>
                </div>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">登录设备管理</div>
                        <div class="setting-description">查看和管理已登录的设备</div>
                    </div>
                    <button class="btn btn-secondary">管理</button>
                </div>
            </div>

            <div class="settings-group">
                <h3>其他</h3>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">清除缓存</div>
                        <div class="setting-description">清除浏览器缓存数据</div>
                    </div>
                    <button class="btn btn-secondary">清除</button>
                </div>
                <div class="setting-item">
                    <div>
                        <div class="setting-label">注销账号</div>
                        <div class="setting-description" style="color: var(--error-color);">此操作不可恢复,请谨慎操作</div>
                    </div>
                    <button class="btn" style="background-color: var(--error-color); color: white;">注销</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <ul>
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">加入我们</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>帮助中心</h3>
                <ul>
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">用户协议</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>社区规则</h3>
                <ul>
                    <li><a href="#">社区公约</a></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><a href="#">举报中心</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>关注我们</h3>
                <ul>
                    <li><a href="#">微博</a></li>
                    <li><a href="#">微信公众号</a></li>
                    <li><a href="#">官方APP</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2024 百度贴吧. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        // 导航栏切换
        document.getElementById('navToggle').addEventListener('click', function() {
            const navLinks = document.getElementById('navLinks');
            navLinks.classList.toggle('active');
        });

        // 标签页切换
        function switchTab(event, tabId) {
            event.preventDefault();

            // 移除所有活动状态
            document.querySelectorAll('.tab-link').forEach(link => {
                link.classList.remove('active');
            });
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });

            // 添加活动状态
            event.target.classList.add('active');
            document.getElementById(tabId).classList.add('active');

            // 滚动到顶部
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // 表单提交
        document.querySelector('.info-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('个人信息已保存!');
        });
    </script>
</body>
</html>
